<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.div {
			width: 500px;
			height: 500px;
			border: 0px solid;
			}
			
			.taiji {
				width: 200px;
				height: 200px;
				border-radius: 50%;
				position: absolute;
				box-shadow: 10px 10px 10px #6E6568;
				left: 100px;
				top: 0px;
		}
	</style>

	<body>

		<div class="div">
			<canvas id="myCanvas" width="1300" height="600" style="border: 1px solid;">
			
		</canvas>
		</div>
		<script type="text/javascript">
			//获取画布
			var canvas = document.getElementById("myCanvas");
			//创建画笔
			var ctx = canvas.getContext("2d");

			var rot = 0;
			var l = 0;
			var t = 0;
			var lrot = 10;
			var trot = 10;
			setInterval(function() {
				var y = Math.sin(rot / 180 * Math.PI) * 50;
				var x = Math.cos(rot / 180 * Math.PI) * 50;
				ctx.clearRect(0, 0, 1300, 600);
				ctx.fillStyle = "yellow";
				ctx.fillRect(0, 0, 1300, 600);
				ctx.beginPath();
				ctx.arc(l, t, 100, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI);
				ctx.fillStyle = "white"
				ctx.fill()

				ctx.beginPath();
				ctx.arc(l, t, 100, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI, true);
				ctx.fillStyle = "black"
				ctx.fill()

				ctx.beginPath();
				ctx.arc(l - x, t - y, 50, 0, 2 * Math.PI);
				ctx.fillStyle = "black"
				ctx.fill()

				ctx.beginPath();
				ctx.arc(l + x, t + y, 50, 0, 2 * Math.PI);
				ctx.fillStyle = "white"
				ctx.fill()

				ctx.beginPath();
				ctx.arc(l - x, t - y, 10, 0, 2 * Math.PI);
				ctx.fillStyle = "white"
				ctx.fill()

				ctx.beginPath();
				ctx.arc(l + x, t + y, 10, 0, 2 * Math.PI, true);
				ctx.fillStyle = "black"
				ctx.fill()
				ctx.closePath();
				rot = rot + 10
				
				var tj = document.querySelector(".taiji");
				//改变太极的坐标
				l = l + lrot;
				t = t + trot;
				//如果太极碰到左壁返回
				if(l >= 1150) {
					lrot = -10;
				}
				//如果太极碰到右壁返回
				if(l <= 20) {
					lrot = 10;
				}
				//如果太极碰到下壁返回
				if(t >= 430) {
					trot = -10;
				}
				if(t <= 10) {
					trot = 10;
				}
				tj.style.left = l + "px";
				tj.style.top = t + "px";

			}, 50)
		</script>
	</body>

</html>